<template>
	<view>
		<view class="goods-item">
			<!-- 商品左侧信息区域 -->
			<view class="goods-item-left">
				<!-- 图片 -->
				<image :src="goods.goods_small_logo || defaultPic" mode="widthFix" style="width: 100px;height: 100px;"></image>
			</view>
			<!-- 商品右侧信息区域 -->
			<view class="goods-item-right">
				<!-- 商品名称 -->
				<view class="goods-name">{{ goods.goods_name }}</view>
				<view class="goods-info-box">
					<!-- 商品价格 -->
					<view class="goods-price">¥{{ goods.goods_price | toFixed }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-goods',
	props: {
		goods: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' //默认图片
		};
	},
	filters: {
		toFixed(num) {
			return Number(num).toFixed(2);
		}
	}
};
</script>

<style lang="scss">
.goods-item {
	display: flex;
	justify-content: space-between;

	.goods-item-right {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		margin-left: 10px;
		margin-top: 10px;
		.goods-name {
			font-size: 12px;
		}
		.goods-info-box {
			.goods-price {
				color: #c00000;
				font-size: 16px;
			}
		}
	}
}
</style>
